<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org" xmlns:gdmt="">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <script th:src="@{/amcharts/amcharts.js}" type="text/javascript"></script>
    <script th:src="@{/amcharts/serial.js}" type="text/javascript"></script>
    <title th:text="#{report.gdp.title}"></title>
    <script th:inline="javascript">
        $(function () {
            $("ul#tab-ul-menu-id > li").click(function(event) {
                $("ul#tab-ul-menu-id .active").removeClass("active");
                $(this).addClass("active");

                $("section.tab-content .in").removeClass("in");
                $("section.tab-content .active").removeClass("active");
                var tab = $(this).attr("tab");
                $("#" + tab).addClass("in");
                $("#" + tab).addClass("active")
            });
            $("ul#tab-ul-menu-id > li:first").click();
            queryGdp();


        });//ready

        function queryGdp() {
            var chartData = [
                {
                    "date": "2022-05",
                    "price": 20
                },
                {
                    "date": "2022-05",
                    "price": 75
                },
                {
                    "date": "2022-05",
                    "price": 15
                },
                {
                    "date": "2022-05",
                    "price": 75
                },
                {
                    "date": "2022-05",
                    "price": 158
                },
                {
                    "date": "2022-05",
                    "price": 57
                },
                {
                    "date": "2022-05",
                    "price": 107
                },
                {
                    "date": "2022-05",
                    "price": 89
                },
                {
                    "date": "2022-05",
                    "price": 75
                },
                {
                    "date": "2022-05",
                    "price": 132
                },
                {
                    "date": "2022-05",
                    "price": 158
                },
                {
                    "date": "2022-05",
                    "price": 56
                },
                {
                    "date": "2022-05",
                    "price": 169
                },
                {
                    "date": "2022-05",
                    "price": 24
                },
                {
                    "date": "2022-05",
                    "price": 147
                }
            ];
            loadChart(chartData);

        }

        function loadChart(chartData) {
            var chart;
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.pathToImages = "../amcharts/images/";
            chart.dataProvider = chartData;
            chart.categoryField = "date";
            chart.dataDateFormat = "YYYY-MM";

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
            categoryAxis.minPeriod = "MM"; // our data is daily, so we set minPeriod to DD
            categoryAxis.dashLength = 1;
            categoryAxis.gridAlpha = 0.15;
            categoryAxis.axisColor = "#DADADA";
            categoryAxis.title="month"

            // value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.axisColor = "#DADADA";
            valueAxis.dashLength = 1;
            valueAxis.logarithmic = true; // this line makes axis logarithmic
            chart.addValueAxis(valueAxis);

            // GRAPH
            var graph = new AmCharts.AmGraph();
            graph.type = "smoothedLine";
            graph.bullet = "round";
            graph.bulletColor = "#FFFFFF";
            graph.bulletBorderColor = "#00BBCC";
            graph.bulletBorderAlpha = 1;
            graph.bulletBorderThickness = 2;
            graph.bulletSize = 7;
            graph.title = "Price";
            graph.valueField = "price";
            graph.lineThickness = 2;
            graph.lineColor = "#00BBCC";
            chart.addGraph(graph);

            // CURSOR
            var chartCursor = new AmCharts.ChartCursor();
            chartCursor.cursorPosition = "mouse";
            chart.addChartCursor(chartCursor);

            // SCROLLBAR
            var chartScrollbar = new AmCharts.ChartScrollbar();
            chart.addChartScrollbar(chartScrollbar);

            // WRITE
            chart.write("chartdiv");
        }
    </script>
</head>
<body>
<ul id="tab-ul-menu-id" class="nav nav-tabs">
    <li tab="tab-i18n-id">
        <a href="#">
            <i class="fa fa-area-chart"></i>
            <span th:text="#{report.char}"></span>
        </a>
    </li>
    <li tab="tab-son-menu-id">

    </li>
</ul>
<section class="tab-content">
    <article id="tab-i18n-id" class="tab-pane fade in active">
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
    </article>
    <article id="tab-son-menu-id" class="tab-pane fade">
        <span th:text="子菜单"></span>
    </article>
</section>
</body>
</html>